[#ftl]
[#assign _SelectMixin]
	options:null
	,_setOptionsAttr: function(options){
		array.forEach(options,function(opt){
			if(!opt.label){
				opt.label = opt.value;
			}
		});
		var store = this.get("store");
		if(store){
			store["data"] = options;
			this.set("searchAttr","label");
		}else{
			this.set("store",new Memory({data:options}));
			this.set("searchAttr","label");
		}
		delete this.options;
		this.options = options;
	}
[/#assign]
 
[#assign MultiSelectExtend]
 	options:null
 	 ,_setOptionsAttr: function(options){	
 	 	var store = this.get("store");
 	 	if(store){
 	 		store["data"] = options;
 	 		this.set("searchAttr","value");
 	 	}else{
 	 		this.set("store",new Memory({data:options}));
 	 		this.set("searchAttr","value");
 	 	}
 	 	//remove existing options
 		construct.empty(this.containerNode);
 		//add new options
 	 	array.forEach(options,function(option){
 	 		construct.place(lang.replace("<option value='{value}'>{label}</option>",option), this.containerNode,'last');				
 	 	},this);
 	 }
// 	,startup:function(){
//// 		on(this,"startup",this,function(){
//// 			//console.log("MultiSelect   this.options=",this.options,"this._optionsAdded=",this._optionsAdded);
// 			if(this.options && !this._optionsAdded){			
// 				this._optionsAdded = true;
// 				this.addOption(this.options);
// 			}			
//// 		})
// 	}
 	
 	,addOption:function(options,index){
 		console.warn("@Decrep, please use addOptions(...)")
 		array.forEach(options,function(option){
 			construct.place(lang.replace("<option value='{value}'>{label}</option>",option), this.containerNode, index==undefined?'last':index);				
 		},this);			
 	}
 	,hasOption:function(value){		
 		return array.filter(this.containerNode.options,function(option){
 			return option.value == value;
 		}).length > 0;		
 		//return query('option[value="'+value+'"]', this.containerNode).length > 0;
 	}
 	,getOption:function(value){
 		//return query('option[value="'+value+'"]', this.containerNode)[0];
 		return array.filter(this.containerNode.options,function(option){
 			return option.value == value;
 		})[0];	
 	}
 	,replaceOptions:function(options){		
 		array.forEach(options,function(opt){
 			var existOpt;
 			if(opt.key){
 				//find the option by key which is part of the value
 				existOpt = query("option",this.containerNode).filter(function(option){
 					return option.value.indexOf(opt.key) == 0;
 				})[0];
 			}else{
 				//find the option by value 
 				existOpt = this.getOption(opt.value);
 			}
 			
 			if(existOpt){//replace existing option
 				existOpt.innerHTML = opt.label;
 				existOpt.value = opt.value;
 			}else{//add new option
 				construct.place(lang.replace("<option value='{value}'>{label}</option>",opt), this.containerNode,'last');	
 			}			
 		},this);	
 	}
 	,removeOptions:function(options){
 		array.forEach(options,function(opt){
 			if(opt.domNode){
 				construct.destroy(opt, this.containerNode);	
 			}else{
 				construct.destroy(this.getOption(opt.value), this.containerNode);	
 			} 			
 		},this);
 	}
 	
 	,removeOption:function(option){
 		construct.destroy(option, this.containerNode);
 		option = null;
 	}
 	,addOptions:function(options,index){
 		array.forEach(options,function(option){
 			construct.place(lang.replace("<option value='{value}'>{label}</option>",option), this.containerNode, index==undefined?'last':index);				
 		},this);			
 	}
 	
 	,removeValue:function(value){
 		var option = this.getOption(value);
 		if(option){
 			this.removeOption(option);
 		}
 	}
 	,getOptions:function(){
 		//return this.containerNode.options;
 		return query("option",this.containerNode);
 	}
 	,getValues:function(delimeter){
 		var _delimeter = delimeter?delimeter:",";		
 		var value = "";		
 		var options = this.containerNode.options;
 		if(options.length > 0){
 			value = options[0].value;
 			for(var i = 1; i < options.length; i++){
 				value += _delimeter + options[i].value;
 			}
 		}
// 		//console.log("BoxShadowEditor get value=",value);
 		return value.trim();		
 	}
 	,getLables:function(delimeter){
 		var _delimeter = delimeter?delimeter:",";		
 		var value = "";		
// 		query("option",this.containerNode).forEach(function(opt){
// 			
// 		},this);
 		
 		var options = this.containerNode.options;
 		if(options.length > 0){
 			value = options[0].innerHTML;
 			for(var i = 1; i < options.length; i++){
 				value += _delimeter + options[i].innerHTML;
 			}
 		}		
 		return value.trim();		
 	}
 	
// 	,setValues:function(value,delimeter){
// 		var _delimeter = delimeter?delimeter:",";	
// 		this.clearOptions();
// 		if(value){
// 			var options = value.split(delimeter?delimeter:",");
// 			for(var i = 0; i < options.length; i++){				
// 				this.addOption([{label:options[i],value:options[i]}]);
// 			}
// 		}
// 	}
// 	,clearOptions:function(){
// 		var options = this.containerNode.options;
// 		for(var i = options.length - 1; i >= 0; i--){
// 			this.removeOption(options[i]);
// 		}
// 	}
 	,setValues:function(value,delimeter){
 		this.clearOptions();
 		if(value){
 			var options = [];
 			array.forEach(value.split(delimeter?delimeter:","),function(option){
 				options.push({label:option,value:option.split(":")[0]});
 			},this);
 			this.replaceOptions(options);
// 			this.addOptions(options);
 		}
 	}
 	,clearOptions:function(){
 		var options = this.containerNode.options;
 		
 		array.forEach(options,function(option){
 			construct.destroy(option, this.containerNode);
 		},this);
 	}
[/#assign]

[#include "../styleMixin.ftl"/]

 require({async:false},["dijit/_WidgetBase","dijit/form/ComboBox","dijit/form/FilteringSelect","dijit/form/MultiSelect","dojo/store/Memory"],function(_WidgetBase,ComboBox,FilteringSelect,MultiSelect,Memory){
		lang.extend(_WidgetBase,{
	 		[@styleMixin/]
			,keyframes:null
			,_setKeyframesAttr:function(keyframes){
				for(var name in keyframes){
					this.addDynamicStyleRule(this.keyframes2String(name,keyframes[name]));
				}
			}
	 		,comment:""
		 	,_setCommentAttr:function(text){
		 		this.comment = text;
		 		this.domNode.title = text;
		 	}
		});
		
		lang.extend(ComboBox,{
			${_SelectMixin}
		});
		lang.extend(FilteringSelect,{
			required:false,${_SelectMixin}
		});
		lang.extend(MultiSelect,{
		${MultiSelectExtend}
		});
	});
